<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>瀑布流图片展示</title>
    <style type="text/css">
        *{margin:0;padding:0;list-style-type:none;}
        a,img{border:0;}
        #box{margin: 0 auto;position: relative;}
        .item {box-shadow: 2px 2px 2px #999;position: absolute;}
    </style>
    <script src="../util.js"></script>
</head>
<body>
    <div id="box">
        <div class="item"><img src="img/01.jpg"></div>
        <div class="item"><img src="img/02.jpg"></div>
        <div class="item"><img src="img/03.jpg"></div>
        <div class="item"><img src="img/04.jpg"></div>
        <div class="item"><img src="img/05.jpg"></div>
        <div class="item"><img src="img/06.jpg"></div>
        <div class="item"><img src="img/07.jpg"></div>
        <div class="item"><img src="img/08.jpg"></div>
        <div class="item"><img src="img/09.jpg"></div>
        <div class="item"><img src="img/10.jpg"></div>
        <div class="item"><img src="img/11.jpg"></div>
        <div class="item"><img src="img/12.jpg"></div>
        <div class="item"><img src="img/13.jpg"></div>
        <div class="item"><img src="img/14.jpg"></div>
        <div class="item"><img src="img/15.jpg"></div>
        <div class="item"><img src="img/16.jpg"></div>
        <div class="item"><img src="img/17.jpg"></div>
    </div>
    <script>
        window.onload = function () {
            class Waterfall {
                constructor (selector) {
                    this.box = document.querySelector('#box')
                    this.imgs = Array.from(this.box.querySelectorAll('.item'))
                    this.width = this.imgs[0].offsetWidth
                    this.len = 0
                    this.reg = 10
                    this.z = Math.floor( window.innerWidth / (this.width + this.reg))
                    this.box.style.width = this.z * (this.width + this.reg) + 'px'
                    this.arr = []
                    this.index = 0
                    this.bindEvent()
                }
                bindEvent () {
                    this.sorting()
                    window.onscroll = (e) =>{
                        var scrool_top = document.documentElement.scrollTop || document.body.scrollTop
                        this.maxheight = Math.max(...this.arr)
                        if(scrool_top >= this.maxheight - window.innerHeight - 11){
                            this.loadJson()
                        }
                    }
                    window.onresize = (e) =>{
                        this.z1 = Math.floor( window.innerWidth / (this.width + this.reg))
                        if(this.z1 != this.z){
                            this.z = this.z1
                            this.len = 0
                            this.box.style.width = this.z * (this.width + this.reg) + 'px'
                            this.sorting()
                        }
                    }
                }
                sorting () {
                    if(this.len ==0 ) this.arr = []
                    for(let i=this.len;i<this.imgs.length;i++){
                        if(i<this.z){
                            this.imgs[i].style.left = i * (this.width + this.reg) + 'px'
                            this.imgs[i].style.top = 0
                            this.arr.push(this.imgs[i].offsetHeight)
                        }else{
                            this.min()
                            this.arr[this.index] = this.imgs[i].offsetHeight + this.minheigth + this.reg
                            this.imgs[i].style.left = this.index * (this.width + this.reg) + 'px'
                            this.imgs[i].style.top = this.minheigth + this.reg + 'px'
                        }
                    }
                }
                min () {
                    this.minheigth = Math.min(...this.arr)
                    this.index = this.arr.indexOf(this.minheigth)
                }
                loadJson () {
                    clearInterval(this.box.timer)
                    this.box.timer = setTimeout(() => {
                       setTimeout(() => {
                            var json = [
                                "img/01.jpg",
                                "img/02.jpg",
                                "img/03.jpg",
                                "img/04.jpg",
                                "img/05.jpg",
                                "img/06.jpg",
                                "img/07.jpg",
                                "img/08.jpg",
                                "img/09.jpg",
                                "img/10.jpg",
                                "img/11.jpg",
                                "img/12.jpg",
                                "img/13.jpg",
                                "img/14.jpg",
                                "img/15.jpg",
                                "img/16.jpg",
                                "img/17.jpg"
                            ]
                            var divs = []
                            json.forEach((src) =>{
                                var div = document.createElement('div')
                                div.classList.add('item')
                                div.innerHTML = `<img src=${src}>`
                                this.box.appendChild(div)
                                divs.push(div)
                            })
                            this.len = this.imgs.length
                            this.imgs = this.imgs.concat(divs)
                            var n = 0
                            divs.forEach((div) =>{
                                div.querySelector('img').onload = () =>{
                                    n++
                                    if(n == divs.length){
                                        this.sorting()
                                    }
                                }
                            })
                            
                        }, 1000);
                    }, 20);
                }
                change () {

                }

            }
            new Waterfall('#box')
        }
    </script>
</body>
</html>